.ui-btn-box {
	display: inline-block;
}
.ui-btn {
	position: relative;
	border: 0rpx;
	display: inline-block;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: .7857em 1.5em .7857em;
	font-size: 28rpx;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin: 0 0.25em 0 0;
	transform: translate(0rpx, 0rpx);
	border-radius: $radius;
	white-space: nowrap;
	color: var(--text-a);
	background-color: var(--ui-BG);
	vertical-align: baseline;
	&:first-child:last-child{
		margin: 0;
	}
	&:not([class*='round'])::after {
		border-radius: calc(#{$radius} * 2);
	}
	&:not([class*='border'])::after {
		// content: ' ';
		// width: 200%;
		// height: 200%;
		// display: block;
		// position: absolute;
		// z-index: 0;
		// top: 0;
		// left: 0;
		// transform: scale(0.5);
		// transform-origin: 0 0;
		// pointer-events: none;
		// box-sizing: border-box;
		display: none;
	}
	&.round::after {
		border-radius: #{$round-pill};
	}
	&.icon {
		padding: 0.8em 0.8em;
	}

	&.sm {
		font-size: 24rpx;
	}

	&.lg {
		font-size: 32rpx;
	}

	&.xl {
		font-size: 36rpx;
	}

	&.block {
		width: 100%;
		display: block;
		font-size: 32rpx;
	}

	&[disabled] {
		opacity: 0.6;
	}

	&.none-style {
		background-color: transparent !important;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
	}
}

	.ui-btn:not(.icon) [class*='icon-'] {
		margin: 0 .25em;
	}